const path = require('path')
const webpack = require('webpack')
//. 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
//. Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//导入html-webpack-plugin 在内存中生成HTML的插件
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  // devServer:{
  //   //配置dev-server命令参数的第二种方式,较麻烦
  //   open: true,
  //   port: 3000,
  //   contentBase: 'src',
  //   hot: true
  // },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'),//指定 模板页面
      filename: 'index.html' //指定生成的页面的名称
    })
  ],
  module:{ //这个节点,用于配置 所有 第三方模块加载器
    rules: [ //所有第三方模块的匹配规则
      { test: /\.css$/, use:['style-loader', 'css-loader']}, //配件处理.css文件的第三方loader规则
      { test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, //处理.less文件的第三方规则
      { test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, 
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude:/node_modules/},
      { test: /\.vue$/, use: 'vue-loader'}
    ]
  },
  // resolve:{
  //   alias:{
  //     'vue$': "vue/dist/vue.js"
  //   }
  // }
}